<!--
 * @Author: wangwang 2723008256@qq.com
 * @Date: 2022-05-11 15:26:59
 * @LastEditors: 番茄炒蛋蛋 wzh15802755802@163.com
 * @LastEditTime: 2024-03-08 11:10:26
 * @FilePath: \jzjypc4.0\src\views\PersonalCenter\PersonalMsg\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <!-- 个人中心/我的活动 -->
  <div id="container">
    <div class="content">
      <div class="top">
        <span></span>
        <h3>订单详情</h3>
      </div>
      <div class="bread">
        我的订单>
        <p>{{ title }}</p>
      </div>
      <div class="box">
        <div class="boxTop">
          <h3>订单详情信息</h3>
        </div>
        <div class="msg1">
          <div class="left">
            <p>订单编号：{{ numbers }}</p>
          </div>
          <div class="right">
            <p>订单时间:：{{ timeStamp2String(create_time * 1000, 8) }}</p>
          </div>
        </div>
        <div class="msg1">
          <div class="left">
            <p>订单数量：{{ js_nums }}</p>
          </div>
          <div class="right">
            <p>实际支付：￥{{ pay_price }}</p>
          </div>
        </div>
        <div class="msg1">
          <div class="left" >
            <p>课程名称：{{ title }} （{{info_title}}）</p>
          </div>
          <div class="right">
            <p v-if="pay_time_limit <0 && status == 1">订单状态：已过期</p>
            <p v-else>订单状态：{{ type(status) }}</p>
            <span v-if="status ==1 || (status == 5 && pay_time != 0)" @click="kaipiaoShow = true">申请开票</span>
            <span v-if="zp_title && pay_time !=0 && status!=6  && status!=7" @click="zengpinShow = true">领取赠品</span>
          </div>
        </div>
        <!-- <div class="msg1">
                <div class="left">
                    <p>兑换码：
                        <span v-for="item in jsm_lists" :key="item.numbers">
                            {{item.numbers}}（{{type(item.status)}}）
                        </span>
                    </p>
                </div>
                <div class="right">
                    <p>开通账号：{{kt_account?kt_account:'/'}}</p>
                </div>
            </div> -->
        <div class="ddInfo">
          <div class="left">订单说明</div>
          <div class="right">
            <h5>订单支付成功后您可以通过以下方式活动的服务</h5>
            <p>
              1、在【精准教研丨定制化教研教学服务】小程序我的-我的订单进行学习。
            </p>
            <p>
              2、访问电脑端网址：www.idianjiao.com个人中心，我的订单进行学习。
            </p>
            <p>
              3、一定要添加下方专属客服二维码，在资源包更新的同时，客服可通过微信直接发送给您。
            </p>
          </div>
        </div>
        <div class="kefu">
          <div class="left">专属客服</div>
          <div class="right">
            <div class="pic">
              <img :src="qwkf_file_url" v-if="status == 5 && pay_time" /><!-- 现金支付 资源客服二维码-->

              <img :src="vipkf_file_url" v-else-if="status == 5 && !pay_time" /><!--  扫码解锁 vip客服二维码-->

              <img :src="zykf_file_url" v-else /><!-- ，未付费 资源客服2二维码-->
              
              <!-- <img :src="qwkf_file_url"/> -->
            </div>
            <div class="mshInfo">
              <p>专属客服将每月将准时为您推送服务</p>
              <p>一定要添加专属客服二维码</p>
            </div>
          </div>
        </div>
      </div>
      <!-- 申请开票框 -->
      <div class="kpBox">
        <el-dialog
          :visible.sync="kaipiaoShow"
          width="540px"
          custom-class="duihuan"
        >
          <h2>申请开票</h2>
          <div class="kpContent">
            <div class="type">
              <div class="left">发票类型</div>
              <div class="right">
                <div class="type1">
                  <img
                    src="../../../assets/img/images/floting_nochose.png"
                    v-show="kptype == 2"
                    @click="kptype = 1"
                  />
                  <img
                    src="../../../assets/img/images/floting_chosed.png"
                    v-show="kptype == 1"
                    @click="kptype = 2"
                  />
                  <p>电子发票</p>
                </div>
                <div class="type1">
                  <img
                    src="../../../assets/img/images/floting_nochose.png"
                    v-show="kptype == 1"
                    @click="kptype = 2"
                  />
                  <img
                    src="../../../assets/img/images/floting_chosed.png"
                    v-show="kptype == 2"
                    @click="kptype = 1"
                  />
                  <p>纸质发票</p>
                </div>
              </div>
            </div>
            <div class="type">
              <div class="left">发票内容</div>
              <div class="right">
                <p>课程</p>
              </div>
            </div>
            <div class="type">
              <div class="left">抬头类型</div>
              <div class="right">
                <div class="type1">
                  <img
                    src="../../../assets/img/images/floting_nochose.png"
                    v-show="title_type == 2"
                    @click="title_type = 1"
                  />
                  <img
                    src="../../../assets/img/images/floting_chosed.png"
                    v-show="title_type == 1"
                    @click="title_type = 2"
                  />
                  <p>个人</p>
                </div>
                <div class="type1">
                  <img
                    src="../../../assets/img/images/floting_nochose.png"
                    v-show="title_type == 1"
                    @click="title_type = 2"
                  />
                  <img
                    src="../../../assets/img/images/floting_chosed.png"
                    v-show="title_type == 2"
                    @click="title_type = 1"
                  />
                  <p>单位</p>
                </div>
              </div>
            </div>
            <div class="type" v-show="title_type == 2">
              <div class="left">抬头名称</div>
              <div class="right">
                <input type="text" v-model="kptitle" placeholder="请输入开票抬头" />
              </div>
            </div>
            <div class="type" v-show="title_type == 2">
              <div class="left">税号</div>
              <div class="right">
                <input type="text" v-model="taxnumber" placeholder="请输入单位税号" />
              </div>
            </div>
            <div class="type" v-show="kptype == 2">
              <div class="left">收货人名称</div>
              <div class="right">
                <input type="text" v-model="name" placeholder="请输入收货人名称" />
              </div>
            </div>
            <div class="type" v-show="title_type == 1">
              <div class="left">身份证号</div>
              <div class="right">
                <input type="text" v-model="sfzh" placeholder="请输入身份证号" />
              </div>
            </div>
            <div class="type">
              <div class="left">申请时间</div>
              <div class="right">
                <p>{{ timeStamp2String(new Date(), 7) }}</p>
              </div>
            </div>
            <div class="type">
              <div class="left">联系电话</div>
              <div class="right">
                <p><input type="text" v-model="phone" placeholder="请输入您联系方式" /></p>
              </div>
            </div>
            <div class="type" v-show="kptype == 1">
              <div class="left">邮箱（电子发票填写）</div>
              <div class="right">
                <p><input type="text" v-model="email" placeholder="请输入您的邮箱" /></p>
              </div>
            </div>
            <div class="type" v-show="kptype == 2">
              <div class="left">收货地址（纸质发票填写）</div>
              <div class="right">
                <p><input type="text" v-model="address" placeholder="请输入您的地址" /></p>
              </div>
            </div>
          </div>
          <p class="tips">
            Tips：发票将在财务审核通过后的<span>1-2</span>个工作日内发送至您的邮箱
          </p>
          <div class="submit" @click="submit">提交申请</div>
        </el-dialog>
      </div>
      <!-- 领取赠品 -->
      <div class="kpBox">
        <el-dialog
          :visible.sync="zengpinShow"
          width="540px"
          custom-class="duihuan"
        >
          <h2>领取赠品</h2>
          <div class="kpContent">
            <div class="type">
              <div class="left">赠品名称</div>
              <div class="right">
                <p>{{zp_title}}</p>
              </div>
            </div>
            <div class="type">
              <div class="left">收货人名称</div>
              <div class="right">
                <input type="text" v-model="name" placeholder="请输入收货人名称" />
              </div>
            </div>
            <div class="type">
              <div class="left">联系电话</div>
              <div class="right">
                <p><input type="text" v-model="phone" placeholder="请输入您联系方式" /></p>
              </div>
            </div>
            <div class="type">
              <div class="left">收货地址</div>
              <div class="right">
                <p><input type="text" v-model="address" placeholder="请输入您的地址" /></p>
              </div>
            </div>
          </div>
          <!-- <p class="tips">
            Tips：发票将在财务审核通过后的<span>1-2</span>个工作日内发送至您的邮箱
          </p> -->
          <div class="submit" style="margin-top:40px;" @click="submitzp">提交申请</div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import { timeStamp2String } from "../../../utils/time";
import { info_orders, sysinfo, askordersfp,askorderszp } from "../../../api/http";
export default {
  name: "changeClass",
  components: {},
  data() {
    return {
      timeStamp2String,
      id:'',//订单id
      title: "", //包名称
      numbers: "", //订单编号
      create_time: "", //创建时间
      zykf1_file_url: "", //客服1二维码（已订阅已付费）
      zykf_file_url: "", //客服2二维码（已订阅已付费）
      qwkf_file_url:"",//企微客服二维码（已订阅未付费）
      vipkf_file_url:'',//vip客服二维码 （扫海拔解锁）
      js_nums: "", //订单数量//解锁码数量
      pay_price: "", //实付金额
      pay_time:'',//支付时间
      status: "", //订单状态
      jsm_lists: [], //解锁码列表
      zp_title:'',//赠品名称

      kt_account: "", //开通账号
      kaipiaoShow: false, //开票弹窗展示
      kptype: 1, //1.电子发票, 2.纸质发票
      title_type: 1, //抬头类型
      sfzh:'',//身份证号
      taxnumber: "", //税号
      name: "", //收货人名称
      phone: "", //联系方式
      address: "", //收货地址
      email:'',//邮箱地址
      kptitle:'',//抬头内容

      //领取赠品
      zengpinShow:false,//赠品弹窗展示

      is_dy:'',//是否订阅
      is_js:'',//是否解锁
      is_pay:'',//是否支付

      pay_time_limit:'',//支付剩余时间
      info_title:'',//标题后内容
    };
  },
  created() {
    console.log(this.xitongMsg);
    this.info_title = this.$route.query.info_title;
    this.getOrderInfo(); //获取订单列表
    //获取系统信息
    sysinfo().then((res) => {
      const data = res.retRes;
      this.zykf1_file_url = data.zykf1_file_url;
      this.zykf_file_url = data.zykf_file_url;
      this.qwkf_file_url = data.qwkf_file_url;
      this.vipkf_file_url = data.vipkf_file_url;
    });
  },
  methods: {
    //获取订单详情
    getOrderInfo() {
      info_orders({
        md5key: localStorage.getItem("md5key"),
        id: this.$route.query.id,
      }).then((res) => {
        console.log(res);
        const data = res.retRes;
        this.id = data.id;
        this.title = data.lists[0].goods_title;
        this.numbers = data.numbers;
        this.create_time = data.create_time;
        this.js_nums = data.js_nums;
        this.pay_price = data.pay_price;
        this.pay_time = data.pay_time;
        this.status = data.status;
        this.jsm_lists = data.jsm_lists;
        this.kt_account = data.kt_account;
        this.zp_title = data.lists[0].zp_title;
        this.pay_time_limit = data.pay_time_limit;
        console.log(this.title);
        if(this.$route.query.kp){
          this.kaipiaoShow = true
        }
      });
    },
    //获取历史得订阅支付等信息
    getHistory(){
      ffzyb_status({
        md5key: localStorage.getItem("md5key"),
      }).then((res) => {
        const data  = res.retRes;
        this.is_dy = data.is_dy;
        this.is_js = data.is_js;
        this.is_pay = data.is_pay;
      });
    },
    //转换订单状态
    type(type) {
      if (type == 1) {
        return "待支付";
      } else if (type == 2) {
        return "待发货";
      } else if (type == 3) {
        return "待收货";
      } else if (type == 4) {
        return "已取消";
      } else if (type == 5) {
        return "已完成";
      } else if (type == 6) {
        return "退款中";
      } else if (type == 7) {
        return "已退款";
      }
    },
    //提交申请
    submit() {
      //个人开票
      if (this.title_type == 1) {
        if (!this.sfzh) {
          this.$message({
            message: "请填写个人身份证号",
            duration: 1000,
            showClose: false,
          });
        } else if (!this.phone) {
          this.$message({
            message: "请填写联系方式",
            duration: 1000,
            showClose: false,
          });
        } else {
          //电子发票
          if (this.kptype == 1) {
            if (!this.email) {
              this.$message({
                message: "请填写邮箱地址",
                duration: 1000,
                showClose: false,
              });
            }else{
                this.kaipiao();
            }
          } else {//纸质发票
            if (!this.address) {
              this.$message({
                message: "请填写收货地址",
                duration: 1000,
                showClose: false,
              });
            } else if (!this.name) {
              this.$message({
                message: "请填写收货人名称",
                duration: 1000,
                showClose: false,
              });
            }else{
                this.kaipiao();
            }
          }
        }
      }else{//单位开票
        if (!this.kptitle) {
          this.$message({
            message: "请填写抬头内容",
            duration: 1000,
            showClose: false,
          });
        } else if (!this.taxnumber) {
          this.$message({
            message: "请填写公司税号",
            duration: 1000,
            showClose: false,
          });
        }else if (!this.phone) {
          this.$message({
            message: "请填写联系方式",
            duration: 1000,
            showClose: false,
          });
        } else {
          //电子发票
          if (this.kptype == 1) {
            if (!this.email) {
              this.$message({
                message: "请填写邮箱地址",
                duration: 1000,
                showClose: false,
              });
            }else{
                this.kaipiao();
            }
          } else {//纸质发票
            if (!this.address) {
              this.$message({
                message: "请填写收货地址",
                duration: 1000,
                showClose: false,
              });
            } else if (!this.name) {
              this.$message({
                message: "请填写收货人名称",
                duration: 1000,
                showClose: false,
              });
            }else{
                this.kaipiao();
            }
          }
        }
      }
    },
    //领取赠品
    submitzp(){
      if (!this.name) {
        this.$message({
          message: "请填写收货人名称",
          duration: 1000,
          showClose: false,
        });
      }else if (!this.phone) {
          this.$message({
            message: "请填写联系方式",
            duration: 1000,
            showClose: false,
          });
      }else if (!this.address) {
        this.$message({
          message: "请填写收货地址",
          duration: 1000,
          showClose: false,
        });
      } else{
          askorderszp({
            md5key: localStorage.getItem("md5key"),
            orders_id:this.id,
            zp_title:this.zp_title,
            name:this.name,
            phone:this.phone,
            address:this.address
          }).then(res=>{
            if(res.retInt == 1){
              this.zengpinShow = false
              this.$message('申请成功')
            }else{
              this.$message(res.retErr)
            }
          })
      }
    },
    //提交
    kaipiao(){
      console.log(this.id,this.kptype,
      this.title_type,this.kptitle,
      this.taxnumber,this.name,this.phone,this.email,this.address)
      askordersfp({
        md5key: localStorage.getItem("md5key"),
        orders_id:this.id,
        type:this.kptype,
        contents:'课程',
        title_type:this.title_type,
        title:this.kptitle,
        taxnumber:this.title_type == 1?this.sfzh:this.taxnumber,
        name:this.name,
        phone:this.phone,
        email:this.email,
        address:this.address
      }).then(res=>{
        console.log(res)
        if(res.retInt == 1){
          this.kaipiaoShow =false
        }else{
          this.$message(res.retErr)
        }
      })
    },
  },
};
</script>
<style lang="less" scoped>
#container {
  .content {
    .top {
      display: flex;
      margin: 30px 0px 20px 30px;
      span {
        display: inline-block;
        position: relative;
        top: 5px;
        margin-right: 10px;
        width: 3px;
        height: 20px;
        background: #08a579;
        border-radius: 2px;
      }
      h3 {
        font-size: 20px;
      }
    }
    .bread {
      display: flex;
      margin-left: 30px;
      font-size: 14px;
      color: #323333;
      p {
        color: #08a579;
      }
    }
    .box {
      margin-top: 20px;
      margin-left: 30px;
      width: 840px;
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 0px 0px 4px 4px;
      .boxTop {
        width: 840px;
        height: 48px;
        background: #f0f2f5;
        line-height: 48px;
        // border: 1px solid #E6E6E6;
        h3 {
          margin-left: 30px;
          font-size: 16px;
          color: #323333;
        }
      }
      .msg1 {
        display: flex;
        border-bottom: 1px solid #e6e6e6;
        .left,
        .right {
          width: 50%;
          p {
            display: inline-block;
            display: flex;
            align-items: center;
            margin-left: 30px;
            padding: 10px;
            min-height: 32px;
            line-height: 22px;
            border-right: 1px solid #e6e6e6;
            color: #646566;
          }
        }
        .right {
          display: flex;
          align-items: center;
          p {
            border-right: none;
          }
          span {
            margin-left: 70px;
            color: #08a579;
            cursor: pointer;
            user-select: none;
          }
        }
      }
      .ddInfo {
        display: flex;
        align-items: center;
        // justify-content: space-between;
        height: 140px;
        border-bottom: 1px solid #e6e6e6;
        .left {
          width: 160px;
          height: 140px;
          border-right: 1px solid #e6e6e6;
          line-height: 140px;
          text-align: center;
        }
        .right {
          margin-left: 30px;
          line-height: 22px;
          h5 {
            font-size: 14px;
            color: #646566;
            font-weight: normal;
          }
          p {
            font-size: 12px;
            color: #969799;
          }
        }
      }
      .kefu {
        display: flex;
        align-items: center;
        // justify-content: space-between;
        height: 140px;
        .left {
          width: 160px;
          height: 160px;
          border-right: 1px solid #e6e6e6;
          line-height: 160px;
          text-align: center;
        }
        .right {
          display: flex;
          align-items: center;
          margin-left: 30px;
          line-height: 22px;
          .pic {
            width: 120px;
            height: 120px;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .mshInfo {
            margin-left: 20px;
            p {
              font-size: 14px;
              color: #969799;
            }
            p:last-child {
              font-size: 12px;
              color: #f25555;
            }
          }
        }
      }
    }
    .kpBox {
      overflow: hidden;
      /deep/.el-dialog {
        overflow: hidden;
        border-radius: 20px;
      }
      /deep/.el-dialog__header {
        padding: 0;
      }
      /deep/.el-dialog__body {
        padding: 0;
      }
      /deep/.el-dialog__headerbtn .el-dialog__close {
        color: #c0c1c5;
        font-weight: bold;
      }
      h2 {
        margin: 30px auto;
        margin-bottom: 40px;
        text-align: center;
        font-size: 18px;
        color: #333;
      }
      .kpContent {
        margin: 0 auto;
        margin-bottom: 15px;
        width: 440px;
        border: 1px solid #e6e6e6;
        font-size: 14px;
        color: #646566;
        .type {
          display: flex;
          align-items: center;
          line-height: 44px;
          border-bottom: 1px solid #e6e6e6;
          .left {
            margin-left: 28px;
            width: 176px;
            border-right: 1px solid #e6e6e6;
          }
          .right {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-left: 28px;
            .type1 {
              display: flex;
              align-items: center;
              margin-right: 20px;
              img {
                margin-right: 5px;
                width: 14px;
                height: 14px;
                cursor: pointer;
              }
            }
            input {
              width: 200px;
              height: 30px;
              font-size: 14px;
              border: 0;
              outline: none;
            }
          }
        }
        .type:last-of-type {
          border: 0;
        }
      }
      .tips {
        margin-bottom: 20px;
        margin-left: 50px;
        font-size: 12px;
        color: #969699;
        span {
          color: #f6444e;
        }
      }
      .submit {
        margin: 0 auto;
        margin-bottom: 40px;
        line-height: 40px;
        text-align: center;
        width: 120px;
        height: 40px;
        color: #fff;
        font-size: 14px;
        background: #08a579;
        border-radius: 4px;
        cursor: pointer;
        user-select: none;
      }
      .submit:active {
        opacity: 0.8;
      }
    }
  }
}
</style>